<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>feedBack</title>
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <style>

    </style>
</head>
<body>
<div id="feedBack">
    <template>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="本人ID" prop="userId">
                <el-input v-model="ruleForm.userId" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="被投诉对象" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择被投诉对象">
                    <el-option label="学生" value="student"></el-option>
                    <el-option label="老师" value="teacher"></el-option>
                    <el-option label="视频" value="video"></el-option>
                    <el-option label="课程" value="course"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="被投诉ID" prop="feedbackId" style="width: 300px;">
                <el-input v-model="ruleForm.feedbackId"></el-input>
            </el-form-item>
            <el-form-item label="投诉内容" prop="content" style="width: 300px;">
                <el-input type="textarea" v-model="ruleForm.content"></el-input>
            </el-form-item>
            <el-form-item label="当前时间" required>
                <div class="block"  type="datetimerange">
                    <el-date-picker
                            v-model="ruleForm.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提  交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </template>
</div>

<script src="../js/vue.js"></script>
<script src="../js/element-ui/index.js"></script>
<script>
    new Vue({
        el:'#feedBack',
        data() {
            return {
                ruleForm: {
                    userId: '',
                    type: '',
                    feedbackId:'',
                    date1: '',
                    date2: '',
                    content: ''
                },
                rules: {
                    userId: [
                        { required: true, message: '请输入本人ID', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择要投诉的对象类型', trigger: 'change' }
                    ],
                    fId: [
                        { required: true, message: '请输入要投诉的对象ID', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请填写投诉内容', trigger: 'blur' }
                    ]
                },

                value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                value2: ''
            };
        },
        methods: {
            submitForm() {
                let ruleForm = this.ruleForm;
                axios.post("/feedback/submit",ruleForm).then(response=>{
                    let flag = response.data.flag;
                    if (flag == true){
                        alert("投诉成功")
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>

</body>
</html>